<!DOCTYPE html>
<html>

<head>
  <title>
    <%= title %>
  </title>
  <link rel='stylesheet' href='/lib/bootstrap/dist/css/bootstrap.min.css' />
  <link rel='stylesheet' href='/stylesheets/font-awesome.min.css' />
  <link rel='stylesheet' href='/stylesheets/ionicons.min.css' />
  <link rel='stylesheet' href='/lib/admin-lte/dist/css/AdminLTE.css' />
  <link rel='stylesheet' href='/lib/icheck/skins/square/blue.css' />
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    body.login-page {
      background: url("/images/loginbg.jpg") no-repeat center;
      background-size: cover;
    }
    #loginbox{
        position: absolute;
        z-index: 1000;
        top:50%;
        left:50%;
        transform: translate(-50%,-100%);
      }
      /* #fizz{
        z-index: -1;
        position: absolute;
      } */
      #tip{
        color: #f00;
      }
      canvas{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
  </style>
</head>

<body class="hold-transition login-page">
    <canvas id="fizz" width="3000" height="1500"></canvas>
  <div class="login-box">
    <div class="login-logo">
      <a href="/">
        <b>精彩家庭</b>--登录</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body" style="background:pink">
      <form action="/users/loginAction" method="post">
        <div class="form-group has-feedback">
          <input type="text" class="form-control" name="userID" placeholder="用户名">
          <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" name="password" placeholder="密码">
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="checkbox icheck">
              <label>
                <input type="checkbox"> 记住密码
              </label>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-xs-4">
            <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
          </div>
          <!-- /.col -->
        </div>
      </form>

      <a href="#" id="tip"><%= errInfo %></a><br>
      <a href="#">忘记密码</a>

    </div>
    <!-- /.login-box-body -->
  </div>

</body>

<script src="/javascripts/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/lib/icheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' // optional
    });
  });
</script>

<!-- canvas -->
<script>
    (function() {
      this.Bubble = (function() {
        class Bubble {
          constructor(x, y, r, createdAt) {
            this.x = x;
            this.y = y;
            this.r = r;
            this.createdAt = createdAt;
          }
    
          velocity() {
            return this.r / 20 * Bubble.MAX_V;
          }
    
          grow(now) {
            if (!this.rising && this.r <= Bubble.MAX_R) {
              return this.r += Bubble.GROWTH_RATE * (now - this.createdAt);
            }
          }
    
          move(now) {
            if (this.rising) {
              return this.y -= (now - this.startedRisingAt) * this.velocity();
            }
          }
    
          rise() {
            if (!this.rising && this.r > 2) {
              this.rising = Math.random() < 0.15 * (this.r / Bubble.MAX_R);
              if (this.rising) {
                return this.startedRisingAt = new Date().getTime();
              }
            }
          }
    
        };
    
        Bubble.MAX_R = 20;
    
        Bubble.MAX_V = 0.02;
    
        Bubble.GROWTH_RATE = 0.00005;
    
        return Bubble;
    
      }).call(this);
    
      this.RisingBubbles = (function() {
        var rand, randInt;
    
        class RisingBubbles {
          constructor(id, maxBubbles) {
            var elem, i, j, ref;
            this.maxBubbles = maxBubbles;
            this.canvas = document.getElementById(id);
            elem = $('#' + id);
            elem.click(() => {
              var b, j, len, ref, results, ts;
              ts = new Date().getTime();
              ref = this.bubbles;
              results = [];
              for (j = 0, len = ref.length; j < len; j++) {
                b = ref[j];
                if (!b.rising) {
                  b.rising = true;
                  results.push(b.startedRisingAt = ts);
                } else {
                  results.push(void 0);
                }
              }
              return results;
            });
            this.canvas.width = this.canvas.clientWidth;
            this.canvas.height = this.canvas.clientHeight;
            this.ctx = this.canvas.getContext('2d');
            this.ctx.fillStyle = '#FFFFFF';
            this.bubbles = [];
            this.lastFrame = new Date().getTime();
            for (i = j = 1, ref = randInt(0, this.maxBubbles); 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
              this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), rand(0, Bubble.MAX_R), new Date().getTime()));
            }
          }
    
          draw() {
            return this.run(new Date().getTime());
          }
    
          run(now) {
            var bubble, j, len, ref;
            this.update(now);
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            ref = this.bubbles;
            for (j = 0, len = ref.length; j < len; j++) {
              bubble = ref[j];
              this.ctx.moveTo(bubble.x, bubble.y);
              this.ctx.beginPath();
              this.ctx.arc(bubble.x, bubble.y, bubble.r, 0, 2 * Math.PI);
              this.ctx.fill();
            }
            return requestAnimationFrame(() => {
              return this.run(new Date().getTime());
            });
          }
    
          update(now) {
            var b, i, j, k, len, ref, ref1, results;
            ref = this.bubbles;
            for (j = 0, len = ref.length; j < len; j++) {
              b = ref[j];
              b.grow(now);
              b.rise();
              b.move(now);
            }
            this.bubbles = (function() {
              var k, len1, ref1, results;
              ref1 = this.bubbles;
              results = [];
              for (k = 0, len1 = ref1.length; k < len1; k++) {
                b = ref1[k];
                if (b.y + b.r >= 0) {
                  results.push(b);
                }
              }
              return results;
            }).call(this);
            if (this.maxBubbles - this.bubbles.length > 0) {
              results = [];
              for (i = k = 1, ref1 = randInt(0, this.maxBubbles - this.bubbles.length); 1 <= ref1 ? k <= ref1 : k >= ref1; i = 1 <= ref1 ? ++k : --k) {
                results.push(this.bubbles.push(new Bubble(randInt(0, this.canvas.width), randInt(0, this.canvas.height), 1, new Date().getTime())));
              }
              return results;
            }
          }
    
        };
    
        randInt = function(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        };
    
        rand = function(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        };
    
        return RisingBubbles;
    
      }).call(this);
    
      $((function() {
        var fizz;
        fizz = new RisingBubbles('fizz', 500);
        return fizz.draw();
      }));
    
    }).call(this);
    
    </script>

</html>